<template>
    <el-dialog v-model="dialogFormVisible" title="删除产品" width="30%" center draggable>
        <span style="margin: 0 auto;">请慎重操作，产出后无法恢复产品</span>
        <!-- 底部内容 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="deleteProduct">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
    import { ref, defineEmits, onBeforeUnmount, defineExpose } from 'vue'
    import { bus } from '@/utils/mitt'
    import { ElMessage } from 'element-plus'
    import { deleteProduct as deleteproduct } from '@/api/product.js'

    const deleteId = ref()
    const dialogFormVisible = ref(false)
    const emit = defineEmits(['success'])

    const deleteProduct = async () => {
        const res: any = await deleteproduct(deleteId.value)
        if (res.status == 0) {
            dialogFormVisible.value = false
            ElMessage.success({
                message: '删除产品成功',
                type: 'success'
            })
            emit('success')
        } else {
            ElMessage.error('删除产品失败')
        }
    }
    const open = () => {
        dialogFormVisible.value = true
    }
    bus.on('deleteProductId', (id: number) => {
        deleteId.value = id
    })

    defineExpose({
        open
    })

    onBeforeUnmount(() => {
        bus.all.clear()
    })
</script>
<style lang="scss" scoped></style>